<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>添加活动</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加表单 -->
    <el-form :inline="true" :model="formInline" class="user-saveActivity">
      <el-form-item label="活动名称：">
        <el-input v-model="formInline.actName" placeholder="请输入活动名称" />
      </el-form-item> <br/>
      <el-form-item label="活动地点：">
        <el-input v-model="formInline.actAddress" placeholder="请输入活动地点" />
      </el-form-item> <br/>
      <el-form-item label="活动门店：">
        <el-input v-model="formInline.actStore" placeholder="请输入活动门店" />
      </el-form-item> <br/>
      <el-form-item label="活动类型：">
        <el-input v-model="formInline.actType" placeholder="请输入活动类型" />
      </el-form-item> <br/>
      <el-form-item label="开始时间：">
        <el-date-picker
          v-model="formInline.startTime"
          type="datetime"
          placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item> <br/>
      <el-form-item label="结束时间：">
        <el-date-picker
          v-model="formInline.endTime"
          type="datetime"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item> <br/>
      <el-form-item label="上传活动图片：">

        <el-upload
          action="http://localhost:1234/management-mall/activity/upload"
          list-type="picture-card"
          name="goods">
          <i class="el-icon-plus"></i>
        </el-upload>

      </el-form-item> <br/>
      <el-form-item style="margin-left: 250px">
        <el-button type="primary" icon="el-icon-document-checked" @click="saveActivity">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ActivitySave} from "../../api/activityMG";

export default {
  name: "AddActivity",
  data () {
    return {
      // 表单
      formInline: {
        actName: '',
        actAddress: '',
        actStore: '',
        actType: '',
        startTime: '',
        endTime: '',
        actThumbnail: '',
        token: localStorage.getItem('logintoken')
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  created() {
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res) {
      this.formInline.actThumbnail = res
    },
    handleRemove(file) {
      alert("1")
      console.log(file);
    },
    handlePictureCardPreview(file) {
      alert(2)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl)
    },
    handleDownload(file) {
      alert(3)
      console.log(file);
    },
    saveActivity(params) {
      console.log("添加活动")
      console.log(this.formInline)
      ActivitySave(this.formInline).then(res => {
        if (res.code === '200') {
          this.$message.success("活动添加成功")
          console.log("添加成功")
        } else {
          this.$message.error("活动添加失败")
          console.log("添加失败")
        }
      })
    }
  },
}
</script>

<style scoped>
.user-saveActivity {
  margin-top: 20px;
}
/*图片上传*/
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>

